<style lang="scss">
  .tabs {
    max-width:480px;
    margin:0 20px 10px!important;
  }
  tr{
    cursor: pointer;
  }
  tr.actived{
    background: #eee;
  }
  .btn{
    display: inline-block;
    min-width: 50px;
  }
  select{
    height: 30px;
  }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
      <tabs>
        <tab-pane label="菜单管理">
          <table class="table">
            <thead>
            <tr>
              <th></th>
              <th></th>
              <th>菜单名称</th>
              <th>链接</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="item in list">
              <tr @click="getModify(item.id,0)"  v-if="!item.parentId" :class="{'actived': item.id == id}">
                <td><span v-if="parentId&&parentId==item.id" @click.stop="close" style="cursor: pointer">-</span><span v-else @click.stop="open(item.id)" style="cursor: pointer">+</span></td>
                <td></td>
                <td>{{item.name}}</td>
                <td>{{item.url}}</td>
                <td class="is-icon">
                  <span class="btn-group">
                    <span @click="deletes(item.id)" class="btn">
                      删除
                    </span>
                  </span>
                </td>
              </tr>
              <template  v-for="item1 in list1" v-if="parentId&&item.id==parentId">
                <tr @click="getModify(item1.id,1)" :class="{'actived': item1.id == id}">
                  <td></td>
                  <td><span v-if="parentIds&&parentIds==item1.id" @click.stop="closes" style="cursor: pointer">-</span><span v-else @click.stop="opens(item1.id,item.id)" style="cursor: pointer">+</span></td>
                  <td>{{item1.name}}</td>
                  <td>{{item1.url}}</td>
                  <td class="is-icon">
                    <span class="btn-group">
                      <span @click="deletes(item1.id)" class="btn">
                        删除
                      </span>
                    </span>
                  </td>
                </tr>
                <template v-for="item2 in list2" v-if="parentId&&parentIds&&item.id==parentId&&item1.id==parentIds">
                  <tr @click="getModify(item2.id,2)" :class="{'actived': item2.id == id}">
                    <td></td>
                    <td></td>
                    <td>{{item2.name}}</td>
                    <td>{{item2.url}}</td>
                    <td class="is-icon">
                    <span class="btn-group">
                      <span @click="deletes(item2.id)" class="btn">
                        删除
                      </span>
                    </span>
                    </td>
                  </tr>
                </template>
              </template>
            </template>
            </tbody>
          </table>
        </tab-pane>
      </tabs>
      </div>
      <div class="tile is-parent is-4" style="height: 200px;border-left: 1px solid #dfdfdf">
        <article class="tile is-child">
        <h4 class="title is-5">新建/编辑</h4>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">名称</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.name" type="text">
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">图片</label>
          </div>
          <div class="control">
            <upload @upload="getMap" path="menu" :imgs.sync="param.image" style="margin-left: -20px" ids="image"></upload>
          </div>
        </div>
        <!--<div class="control is-horizontal">-->
          <!--<div class="control-label">-->
            <!--<label class="label">语言</label>-->
          <!--</div>-->
          <!--<div class="control">-->
            <!--<input class="input" v-model="param.langKey" type="text">-->
          <!--</div>-->
        <!--</div>-->
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">描述</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.description" type="text">
          </div>
        </div>
        <div class="control is-horizontal" v-if="!listType">
          <div class="control-label">
            <label class="label">链接类型</label>
          </div>
          <div class="control">
            <select name="" v-model="urlType" id="">
              <option value="/index.html">首页项</option>
              <option value="/list.html">列表1项</option>
              <option value="/content.html">介绍项</option>
              <option value="/detail.html">详情项</option>
              <option value="/item.html">列表2项</option>
              <option value="/time.html">时间轴项</option>
              <option value="/other">外链项</option>
            </select>
          </div>
        </div>
        <div class="control is-horizontal" v-if="(urlType == '/other')&&!listType">
          <div class="control-label">
            <label class="label">链接</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.url" type="text">
          </div>
        </div>
        <div class="control is-horizontal" v-if="(urlType == '/item.html'||urlType == '/time.html'||urlType == '/detail.html')&&!listType">
          <div class="control-label">
            <label class="label">绑定页面</label>
          </div>
          <div class="control">
            <div class="select is-fullwidth">
              <select v-model="pageId">
                <option value="">无</option>
                <option v-for="item in pageList" :value="item.id">{{item.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="control is-horizontal" v-if="!listType">
          <div class="control-label">
            <label class="label">所属菜单</label>
          </div>
          <div class="control">
            <div class="select is-fullwidth">
              <select v-model="param.parentId">
                <option v-for="item in list" :value="item.id">{{item.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">排序</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.displayOrder" type="text">
          </div>
        </div>
        <p style="text-align: center">
          <span @click="adds" class="button">添加</span>
          <span @click="modifyPage"  v-if="(urlType == '/item.html'||urlType == '/detail.html')&&!listType" class="button">去编辑页面</span>
          <span @click="modify" class="button" style="margin-left: 20px">修改</span>
        </p>
      </article>
      </div>
    </div>
  </main>
</template>

<script>
  import mixin from './mixin'
  export default {
    mixins:[mixin],
    data () {
      return {
        param:{},
        menu:[],
        menus:[
//          {id:'88697194420396032',name:'产品'},
          {id:'88698031519588352',name:'资讯'},
        ],
        tpl:{
          '/time.html':'tplTime',
          '/item.html':'tplItem',
          '/detail.html':'tplDetail'
        },
        parentId:'',
        parentIds:'',
        listType:true,
        list1:[],
        list2:[],
        urlType:'',
        pageList:[],
        pageId:''
      }
    },
    watch: {
      urlType: function(val,oldVal){
        if(val != '/detail.html' && val != '/item.html' && val != '/time.html' && val != '/other'){
          this.param.url = this.urlType
        }else{
          if(this.param.url.indexOf('?')>-1){
            this.param.url = this.urlType+'?'+this.param.url.split('?')[1]
          }else{
            this.param.url = this.urlType
          }
        }
      },
      pageId: function (val,oldVal){
        let param = {}
        if(this.param.url.indexOf('?')){
          let arr = this.param.url.split('?')
          param = qs.parse(arr[1])
          param.productId = val
          if(!val){
            delete param.productId
          }
          this.param.url = arr[0]+(qs.stringify(param)?'?':'')+qs.stringify(param)
        }
      }
    },
    methods: {
      modifyPage () {

        let vm = this,url,id
        if(this.param.url.indexOf('?')){
          url = this.param.url.split('?')[0]
          id = qs.parse(this.param.url.split('?')[1]).productId
        }else{
          url = this.param.url
          id = ''
        }
        if(id){
          this.$router.push({path:'/'+vm.tpl[url],query:{menuId:vm.id,id:id}})
        }else{
          this.$router.push({path:'/page',query:{menuId:vm.id}})
        }
      },
      getPage () {
        let vm = this
        this.$http.get('cms/api/websites/89060613317206016/pages?page=0&size=1000',{}).then(function(res){
          vm.pageList = res.data.content
        })
      },
      open (id) {
        this.list1 = this.list.filter(function(data){
          if(data.parentId == id){
            return data
          }
        })
        this.parentId = id
        this.parentIds = ''
        this.list2 = []
      },
      opens (id) {
        this.list2 = this.list.filter(function(data){
          if(data.parentId == id){
            return data
          }
        })
        this.parentIds = id
      },
      close () {
        this.parentId = ''
        this.parentIds = ''
      },
      closes () {
        this.parentIds = ''
      },
      getMenu (callback) {
        let vm = this
        this.$http('menu/api/menus',{}).then(function(res){
          vm.menu = res.data
          if(callback){
            callback.apply()
          }
        })
      },
      getList (num) {
        let vm = this
        this.page.page = num?num:0
        this.listType = false
        this.param = {
          "description": "",
          "displayOrder": 0,
          "image": "",
          "langKey": "",
          "menuId": 0,
          "name": "",
          "parentId": 0,
          "parentName": "",
          "url": ""
        }
        this.$http.get('menu/api/items?page=0&size=1000',{}).then(function(res){
          vm.list = res.data
          let parentIds = vm.parentIds
          vm.open(vm.parentId)
          vm.opens(parentIds)
        })
      },
      setModify (res) {
        let url = '',list=['/index.html','/list.html','/content.html','/detail.html','/item.html','/time.html']
        if(res.data.url.indexOf('?')){
          url = res.data.url.split('?')[0]
          this.pageId = qs.parse(res.data.url.split('?')[1]).productId
        }else{
          url = res.data.url
        }
        if(list.includes(url)){
          this.urlType = url
        }else{
          this.urlType = '/other'
        }
      },
      getModify (id,type) {
        if (type == 0) {
          if (id == this.id) {
            this.close()
          }else{
            this.open(id)
          }
        } else if (type == 1) {
          if (id == this.id) {
            this.closes()
          }else{
            this.opens(id)
          }
        }
        this.id = id
        this._getModify('menu/api/items/'+id,{},this.setModify)
      },
      modify () {
        this._modify('menu/api/items',Object.assign({id:this.id},this.param),this.getList)
      },
      adds () {
        this._add('menu/api/items',this.param,this.getList)
      },
      deletes (id) {
        this._delete('menu/api/items/'+id,{},this.getList)
      }
    },
    mounted () {
      this.getMenu(this.getList)
      this.getPage()
    },
  }
</script>
